<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>历史</title>
    <script src="./jq.min.js"></script>
    <style>
      html,
      body,
      div,
      header,
      main,
      footer,
      ul,
      ol,
      dl,
      p,
      span {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        background-color: rgb(178, 235, 220);
      }
      .header {
        height: 70px;
        background-color: rgb(241, 241, 241);
      }

      .menu-box {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 200px;
        background-color: rgb(19, 111, 104);
      }
      .year {
        height: 30px;
        border-bottom: 1px solid rgb(82, 168, 184);
        background-color: rgb(8, 102, 100);
        /* background-color: linear-gradient( right, #ff9569 0%, #e92758 100%); */
      }
      .date {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
      }
      .date li:not(:first-child) {
        width: 100%;
        height: 30px;
        border: 1px solid #fff;
        background-color: rgb(132, 181, 149);
      }
      .tiao {
        /* width: 100px; */
        display: inline-block;
        height: 10px;
        background-color: #fff;
        border-radius: 3px;
      }
      /* 
        .one .sc-tiao {
            width: 13%; 
        }
        .one .xz-tiao {
            width: 6.7%;
        } */
    </style>
  </head>
  <body>
    <header class="header">header</header>
    <main>main</main>
    <footer class="menu-box">
      <ul class="date">
        <li class="year">公元前2800年 - 公元1921年</li>
        <li class="one">
          <div class="tiao xc-tiao"></div>
          <div class="tiao sc-tiao"></div>
          <div class="tiao zhouchao-tiao"></div>
          <!-- <div class="tiao xz-tiao"></div>
                <div class="tiao cq-tiao"></div> -->
          <div class="tiao qc-tiao"></div>
          <div class="tiao hc-tiao"></div>
          <div class="tiao sg-tiao"></div>
          <div class="tiao sch-tiao"></div>
          <div class="tiao tc-tiao"></div>
          <div class="tiao wd-tiao"></div>
          <div class="tiao lxj-tiao"></div>
          <div class="tiao songchao-tiao"></div>
          <div class="tiao yuanchao-tiao"></div>
          <div class="tiao mingchao-tiao"></div>
          <div class="tiao qingchao-tiao"></div>
        </li>
        <li class="shangchao"></li>
        <li class="xizhou"></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </footer>
    <script>
      window.onload = function () {
        const curYear = new Date().getFullYear();
        const areaYear = curYear + 2070;
        const pct = areaYear * 100;
        let a = (2070 - 1600) / pct;

        const allChaodai = [
          {
            name: "夏朝",
            startYear: 2070,
            endYear: 1600,
            className: "xc",
          },
          {
            name: "商朝",
            startYear: 1600,
            endYear: 1046,
            className: "sc",
          },
          {
            name: "周朝",
            startYear: 1046,
            endYear: 221,
            className: "zhouchao",
          },
          // {
          //     name: '西周',
          //     startYear: 1046,
          //     endYear:771,
          //     className: 'xz'
          // },
          // {
          //     name: '春秋战国',
          //     startYear: 770,
          //     endYear:221,
          //     className: 'cq'
          // },
          {
            name: "秦朝",
            startYear: 221,
            endYear: 207,
            className: "qc",
          },
          {
            name: "汉朝",
            startYear: 202,
            endYear: 220,
            className: "hc",
          },
          {
            name: "三国两晋南北朝",
            startYear: 184,
            endYear: 589,
            className: "sg",
          },
          {
            name: "隋朝",
            startYear: 581,
            endYear: 689,
            className: "sch",
          },
          {
            name: "唐朝",
            startYear: 618,
            endYear: 907,
            className: "tc",
          },
          {
            name: "五代十国",
            startYear: 907,
            endYear: 979,
            className: "wd",
          },
          {
            name: "辽夏金",
            startYear: 907,
            endYear: 1236,
            className: "lxj",
          },
          {
            name: "宋朝",
            startYear: 960,
            endYear: 1276,
            className: "songchao",
          },
          {
            name: "元朝",
            startYear: 1271,
            endYear: 1367,
            className: "yuanchao",
          },
          {
            name: "明朝",
            startYear: 1368,
            endYear: 1644,
            className: "mingchao",
          },
          {
            name: "清朝",
            startYear: 1636,
            endYear: 1922,
            className: "qingchao",
          },
          {
            name: "至今",
            startYear: 1922,
            endYear: areaYear,
            className: "zhijin",
          },
        ];

        const books = [
          {
            name: "黄帝内经",
          },
          {
            name: "难经",
          },
          {
            name: "伤寒杂病论",
          },
          {
            name: "神农本草经",
          },
        ];
        for (let k of allChaodai) {
          // const width = Math.abs(k.startYear - k.endYear)/areaYear*100;
          const width =
            (Math.abs((k.startYear - k.endYear).toFixed(7)) / areaYear) * 100;
          console.log(width);
          $(`.${k.className}-tiao`).width(width + "%");
          $(`.${k.className}-tiao`).attr("data-name", k.name);
        }

        let one = document.getElementsByClassName("one")[0];
        one.onclick = function (e) {
          console.dir(e.target);
        };
      };
    </script>
  </body>
</html>
